<template>
  <div class="kbrec">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- K币记录 -->
      <el-tab-pane label="K币记录" name="first">
        <p class="success-yq-tip f14">
          当前K币{{
            this.$store.state.userdata.kb_count
          }}个，您可以通过充值、推广、新手任务等方式获得K币。
        </p>
        <div class="grid-view">
          <el-table :data="kbList" border row-class-name="row" stripe>
            <el-table-column
              header-align="center"
              prop="operaname"
              label="操作"
              width="103"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="changekb"
              label="变更"
              width="103"
            >
            <template slot-scope="scope">
              {{scope.row.changekb >0?'+'+scope.row.changekb:scope.row.changekb}}
            </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="detail"
              label="详情"
            ></el-table-column>
            <el-table-column
              header-align="center"
              label="操作时间"
            >
            <template slot-scope="scope">
              {{scope.row.lasttime | dateformat}}
            </template>
            </el-table-column>
          </el-table>
          <!-- 分页区 -->
          <div class="fenye">
            <!-- <el-pagination
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="queryInfo.pagenum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :hide-on-single-page="true"
          ></el-pagination> -->
            <el-pagination small layout="prev, pager, next" :total="total"
              :current-page="queryInfo.pagenum"
              @current-change="handleCurrentChange"
              :page-size="queryInfo.pagesize"
              :hide-on-single-page="true"
              background
              prev-text="< 前页"
              next-text=" 后页 >"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <!-- K币记录结束 -->
      <el-tab-pane label="优惠券们" name="second">优惠券们</el-tab-pane>
      <el-tab-pane label="零钱记录" name="third">零钱记录</el-tab-pane>
      <el-tab-pane label="我的佣金" name="fourth">我的佣金</el-tab-pane>
      <el-tab-pane label="订单中心" name="fifth">订单中心</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      queryInfo: {
        pagenum: 1,
        pagesize: 10,
        uid: this.$store.state.uid
      },
      total: 0,
      kbList: []
    }
  },
  methods: {
    // 改变页数
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getKbRecord()
    },
    // 分页页码改变的时候
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getKbRecord()
    },
    handleClick(tab, event) {
      console.log(this.activeName)
      if (this.activeName === 'first') {
        // 获取kb记录的方法
        this.getKbRecord()
      }
    },
    async getKbRecord() {
      const { data: res } = await this.$http.post(
        'getKbRecord.calc',
        this.queryInfo
      )
      console.log(res)
      if (res.code !== '200') return this.$message.error('获取K币记录失败')
      this.total = res.data.totalCount
      this.kbList = res.data.list
    }
  },
  created() {
    this.getKbRecord()
  }
}
</script>

<style lang="less" scoped>
.kbrec {
  margin: 20px 0 0 20px;
}

/deep/ .el-tabs__item {
  height: 48px;
  color: #5a5a5a;
}

/deep/ .el-tabs__nav-wrap::after {
  height: 0px !important;
}

/deep/ .el-tabs__item:hover {
  color: #009966;
}

/deep/ .el-tabs__active-bar {
  background-color: #009966;
  font-weight: 700;
}

/deep/ .el-tabs__item.is-active {
  font-weight: 550;
  color: #009966;
  font-size: 16px;
}

/deep/ .el-tabs__item {
  font-size: 16px;
  font-weight: 600;
}

.success-yq-tip {
  padding-left: 5px;
  padding-bottom: 8px;
  color: #000;
}

.grid-view {
  padding: 0 18px 0 0;
}

.f14 {
  font-size: 14px;
}

.fenye {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 20px
}

/deep/ .el-table td {
  padding: 8px 0;
}

/deep/ .el-table th {
  color: #000;
  font-size: 14px;
}

</style>
